<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优惠券</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>



    <style>
        .bd-0 {
            display: none;
        }

        .active {
            display: block;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div class="public-header flex">
        <!--<span class="public-header-left-search"></span>-->
        <span class="public-header-left-back"></span>
        <span class="public-header-center">优惠券</span>
        <span class="public-header-right"></span>
    </div>

    <!--正文-->
    <div class="Buyer-order bc-gray">
        <div class="hd flex">
            <a href="javascript:;">全部</a>
            <a href="javascript:;">冻结款</a>
            <a href="javascript:;">待付款</a>
            <a href="javascript:;">未发货</a>
            <a href="javascript:;" class="active">待收货</a>


        </div>
        <div class="bd">
            <div class="bd-1 bd-0 ">
                <ul>
                    <li>
                        <div class="title flex">
                            <img src="../img/今日产品 图片@2x.png" alt="">
                            <span>店铺名称</span>
                            <em></em>
                            <i>未付款</i>
                        </div>
                        <div class="content clearfix">
                            <img src="../img/今日产品 图片@2x.png" alt="">
                            <div>
                                内容内容内容内容内容内容
                            </div>
                            <p class="tip">
                                <span>共1件商品 合计:</span>
                                <em>￥4000</em>
                                <i>（含运费￥0.00）</i>
                            </p>
                        </div>

                        <p class="bottom flex">
                            <span>立即付款</span>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="bd-2 bd-0">
                <ul>
                    <li>
                        <div class="title flex">
                            <img src="../img/今日产品 图片@2x.png" alt="">
                            <span>店铺名称</span>
                            <em></em>
                            <i>待发货</i>
                        </div>
                        <div class="content clearfix">
                            <img src="../img/今日产品 图片@2x.png" alt="">
                            <div>
                                内容内容内容内容内容内容
                            </div>
                            <p class="tip">
                                <span>共1件商品 合计:</span>
                                <em>￥4000</em>
                                <i>（含运费￥0.00）</i>
                            </p>
                        </div>

                        <p class="bottom flex">
                            <span>提醒卖家</span>

                        </p>
                    </li>
                </ul>
            </div>
            <div class="bd-3 bd-0">
                <ul>
                    <li>
                        <div class="title flex">
                            <img src="../img/今日产品 图片@2x.png" alt="">
                            <span>店铺名称</span>
                            <em></em>
                            <i>未收货</i>
                        </div>
                        <div class="content clearfix">
                            <img src="../img/今日产品 图片@2x.png" alt="">
                            <div>
                                内容内容内容内容内容内容
                            </div>
                            <p class="tip">
                                <span>共1件商品 合计:</span>
                                <em>￥4000</em>
                                <i>（含运费￥0.00）</i>
                            </p>
                        </div>

                        <p class="bottom flex">
                            <span>查看物流</span>
                            <span>确认收货</span>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="bd-4 bd-0">
                <ul>
                    <li>
                        <div class="title flex">
                            <img src="../img/今日产品 图片@2x.png" alt="">
                            <span>店铺名称</span>
                            <em></em>
                            <i>售后</i>
                        </div>
                        <div class="content clearfix">
                            <img src="../img/今日产品 图片@2x.png" alt="">
                            <div>
                                内容内容内容内容内容内容
                            </div>
                            <p class="tip">
                                <span>共1件商品 合计:</span>
                                <em>￥4000</em>
                                <i>（含运费￥0.00）</i>
                            </p>
                        </div>

                        <p class="bottom flex">
                            <span>立即评价</span>
                            <span>申请售后</span>
                        </p>
                    </li>
                </ul>
            </div>

            <div class="bd-5 bd-0 active">
                <ul>
                    <li>
                        <div class="title flex">
                            <img src="../img/今日产品 图片@2x.png" alt="">
                            <span>店铺名称</span>
                            <em></em>
                            <i>售后</i>
                        </div>
                        <div class="content clearfix">
                            <img src="../img/今日产品 图片@2x.png" alt="">
                            <div>
                                内容内容内容内容内容内容
                            </div>
                            <p class="tip">
                                <span>共1件商品 合计:</span>
                                <em>￥4000</em>
                                <i>（含运费￥0.00）</i>
                            </p>
                        </div>

                        <p class="bottom flex">
                            <span>查看进度</span>
                        </p>
                    </li>
                </ul>
            </div>


        </div>




    </div>



    <script>
        $(function () {
            $('.hd a').click(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
            })



        })
    </script>
</body>

</html>